<template>
	<view class="book-wrapper">
		<view class="new">
			<view class="box" v-for="item in bookdata" :key="item.id" @click="tiao(item.id)">
				<view class="left">
					<image :src="item.cover" mode=""></image>
				</view>
				<view class="right">
					<view class="top">{{item.title}}</view>
					<view class="bo">
						<view class="left">
							￥{{item.t_price}}
							<span>￥{{item.price}} </span>
						</view>
						<view class="right1">
							4人订阅 <u-icon name="play-circle" color="#6c757d" size="13"></u-icon>
						</view>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		bookList
	} from "../api/book.js"
	export default {
		data() {
			return {
				obj: {
					page: 1,
					limit: 8,
				},
				bookdata: [],
				count: 0
			}
		},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {
			//注意数据最好清空下，刷新后只展示第1页的内容
			this.bookdata = []
			this.obj.page = 1
			this.booklistList();
		},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {
			console.log('到底了');
			console.log(this.obj.page, this.count);
			if (this.obj.page < this.count) {
				this.obj.page++
				this.booklistList()
			} else {
				wx.showToast({
					title: '到最后一页了',
				})
			}
		},
		onLoad() {
			this.booklistList()
		},
		methods: {
			tiao(id) {
				uni.navigateTo({
					url: `../book-detail/book-detail?id=${id}`
				})
			},

			async booklistList() {
				const res = await bookList(this.obj)
				console.log(res, "考试列表")
				// this.bookdata = res.data.data.rows
				this.count = Math.ceil(res.data.data.count / this.obj.limit)
				this.bookdata = [...this.bookdata, ...res.data.data.rows];
			}
		}
	}
</script>

<style lang="scss">
	.book-wrapper {
		width: 100%;
		height: 100%;

		.new {
			width: 100%;

			.box {
				width: 100%;
				height: 214rpx;
				display: flex;
				// padding: 20rpx;
				// box-sizing: border-box;
				margin-top: 50rpx;

				// justify-content: space-between;
				.left {
					width: 200rpx;
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-right: 10rpx;

					image {
						width: 200px;
						height: 240rpx;
					}
				}

				.right {
					flex: 1;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					padding: 10rpx;
					box-sizing: border-box;

					.top {
						/* 1.溢出隐藏 */
						overflow: hidden;
						/* 2.用省略号来代替超出文本 */
						text-overflow: ellipsis;
						/* 3.设置盒子属性为-webkit-box  必须的 */
						display: -webkit-box;
						/* 4.-webkit-line-clamp 设置为2，表示超出2行的部分显示省略号，如果设置为3，那么就是超出3行部分显示省略号 */
						-webkit-line-clamp: 1;
						/* 5.字面意思：单词破坏：破坏英文单词的整体性，在英文单词还没有在一行完全展示时就换行  即一个单词可能会被分成两行展示 */
						word-break: break-all;
						/* 6.盒子实现多行显示的必要条件，文字是垂直展示，即文字是多行展示的情况下使用 */
						-webkit-box-orient: vertical;

						font-size: 37rpx;
					}

					.bo {
						width: 100%;
						display: flex;
						justify-content: space-between;

						.left {
							color: red;
							font-size: 35rpx;

							span {
								font-size: 24rpx;
								color: grey;
							}
						}

						.right1 {
							border: 1px solid #dee2e6;
							height: 45rpx;
							width: 120rpx;
							font-size: 25rpx;
							color: #6c757d;
							display: flex;
							justify-content: space-around;
							align-items: center;
							border-radius: 30px;
						}

					}

				}
			}
		}
	}
</style>
